<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>屏幕加载动画</title>
  <link rel="stylesheet" href="./css/屏幕加载动画.css" />
</head>

<body>
  <!-- 圆圈加载 -->
  <div class="loader" id="loader">
    <div class="ring"></div>
  </div>
  <!-- 内容 -->
  <div class="content">
    <div class="image"></div>
    <div class="text">
      <div class="title">Screen Loader in HTML CSS & JavaScript</div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam
        ratione hic a asperiores ipsum maiores quam dolores corrupti nostrum
        totam. Delectus similique unde qui, libero necessitatibus fugiat eaque
        numquam praesentium corporis magnam optio eligendi odio! Repellat,
        omnis! Expedita autem excepturi eius sequi. Eius dolore perferendis
        non magni aliquid blanditiis itaque?
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam
        ratione hic a asperiores ipsum maiores quam dolores corrupti nostrum
        totam. Delectus similique unde qui, libero necessitatibus fugiat eaque
        numquam praesentium corporis magnam optio eligendi odio! Repellat,
        omnis! Expedita autem excepturi eius sequi. Eius dolore perferendis
        non magni aliquid blanditiis itaque?
      </p>
    </div>
  </div>

  <script>
    const loader = document.querySelector('.loader')
    window.onload = () => {
      setTimeout(() => {
        loader.style.opacity = '0'
        setTimeout(() => {
          loader.style.display = 'none'
        }, 500)
      }, 1500)
    }
  </script>
</body>
</html>